import styles from './index.module.scss'
import { diffRemainTimeMs } from '@/utils/date'
import { useRaf } from '@/utils/hooks'
import { useEffect, useState } from 'react'

const Index = props => {
  const { deadline, onEnd } = props
  const [date, setDate] = useState({ d: '-', h: '-', m: '-', s: '-' })
  // 倒计时计算
  const calcDeadline = () => {
    const diffTime = diffRemainTimeMs(new Date(), deadline)
    if (diffTime) {
      setDate(diffTime)
    }
    return diffTime
  }
  const [startPlay] = useRaf(calcDeadline, onEnd)
  useEffect(() => {
    startPlay()
  }, [])
  return (
    <div className={styles.container}>
      <div className={styles.content}>
        <p className={styles.tips}>直播即将开始</p>
        <div className={styles.timeBox}>
          <span>{date.d}</span>
          <span>天</span>
          <span>{date.h}</span>
          <span>时</span>
          <span>{date.m}</span>
          <span>分</span>
          <span>{date.s}</span>
          <span>秒</span>
        </div>
      </div>
    </div>
  )
}

export default Index
